<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>仿苏宁移动端</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 引入flexible.js -->
    <script src="js/flexible.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
</head>
<body>
    <!-- 顶部搜索层开始 -->
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <i class="search_icon"></i>
            <input type="text" placeholder="冰洗狂欢惠 每千减百"/>
        </div>
        <a href="#" class="login"></a>
    </div>
    <!-- 顶部搜索层结束 -->

    <!-- 轮播层开始 -->
    <div class="banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#"><img src="images/banner01.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner02.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner03.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner04.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner05.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner06.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner07.jpg"/></a></div>
                <div class="swiper-slide"><a href="#"><img src="images/banner08.jpg"/></a></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 轮播层结束 -->

    <!-- 广告层开始 -->
    <div class="guanggao">
        <img src="images/818.png"/>
    </div>
    <!-- 广告层结束 -->

    <!-- 图标层开始 -->
    <nav class="icons">
        <ul>
            <li>
                <img src="images/icon01.png"/>
                <p>天天低价</p>
            </li>
            <li>
                <img src="images/icon02.png"/>
                <p>苏宁超市</p>
            </li>
            <li>
                <img src="images/icon03.png"/>
                <p>苏宁拼购</p>
            </li>
            <li>
                <img src="images/icon04.png"/>
                <p>5G手机</p>
            </li>
            <li>
                <img src="images/icon05.png"/>
                <p>苏宁家电</p>
            </li>
            <li>
                <img src="images/icon06.png"/>
                <p>免费受过</p>
            </li>
            <li>
                <img src="images/icon07.png"/>
                <p>赚钱消消乐</p>
            </li>
            <li>
                <img src="images/icon08.png"/>
                <p>签到有礼</p>
            </li>
            <li>
                <img src="images/icon09.png"/>
                <p>领卷中心</p>
            </li>
            <li>
                <img src="images/icon10.png"/>
                <p>更多频道</p>
            </li>
        </ul>
    </nav>
    <!-- 图标层结束 -->

    <!-- 新人大礼包开始 -->
    <div class="new_user">
        <a href="#"><img src="images/dalibao.png"/></a>
        <a href="#"><img src="images/baoyou01.gif"/></a>
        <a href="#"><img src="images/baoyou02.gif"/></a>
    </div>
    <!-- 新人大礼包结束 -->

    <!-- 推荐商品开始 -->
    <div class="recommend">
        <div class="item">
            <div class="title">天天低价</div>
            <div class="countDown">
                <span>02</span>:<span>39</span>:<span>40</span>
            </div>
            <div class="desc">人气好货限时抢</div>
            <div class="product">
                <a href="#">
                    <img src="images/dijia01.jpg"/>
                    <p class="price">¥1.<small>1</small></p>
                </a>
                <a href="#">
                    <img src="images/dijia02.jpg"/>
                    <p class="price">¥2.<small>5</small></p>
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">苏宁秒杀</div>
            <div class="desc">品质好货天天秒</div>
            <div class="product">
                <a href="#">
                    <img src="images/miaoshi01.jpg"/>
                    <p class="product_name">Apple</p>
                </a>
                <a href="#">
                    <img src="images/miaoshi02.jpg"/>
                    <p class="product_name">溢流香</p>
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">百亿补贴</div>
            <div class="desc">全民省钱</div>
            <div class="product">
                <a href="#">
                    <img src="images/butie01.jpg"/>
                    <p class="product_name">补贴价29.9</p>
                </a>
                <a href="#">
                    <img src="images/butie02.jpg"/>
                    <p class="product_name">补贴价1399</p>
                </a>
            </div>
        </div>

        <div class="item">
            <div class="title">苏宁拼购</div>
            <div class="desc">2人拼更实惠 全场包邮</div>
            <div class="product">
                <a href="#">
                    <img src="images/miaoshi01.jpg"/>
                    <p class="product_name">2人拼68</p>
                </a>
                <a href="#">
                    <img src="images/miaoshi02.jpg"/>
                    <p class="product_name">2人拼18.8</p>
                </a>
            </div>
        </div>

        <!-- 为您推荐 -->
        <div class="weinintuijian">
            <div class="left">
                <div class="title">为您推荐</div>
                <div class="desc">精选频道</div>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <img src="images/tuijian01.png"/>
                        <p>苏宁国际</p>
                    </li>
                    <li>
                        <img src="images/tuijian02.png"/>
                        <p>Outlets</p>
                    </li>
                    <li>
                        <img src="images/tuijian03.png"/>
                        <p>新品首发</p>
                    </li>
                    <li>
                        <img src="images/tuijian04.png"/>
                        <p>0元试用</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 推荐商品结束 -->

    <script>      
        // 轮播图
        new Swiper ('.swiper-container', {
            // direction: 'vertical', // 垂直切换选项
            direction: 'horizontal', // 横向切换选项
            loop: true, // 循环模式选项,
            // 自动切换
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }
        })
    </script>
</body>
</html>